<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
  </head>
  <script src="js/jquery-1.4.1.js"></script>
  <script>
  	$(function(){

  	    var uState=false;
  	    var pState=false;
  	    var tState=false;

  	    $("input[name='username']").blur(function () {
            var username = $(this).val();
            if(username == ''){
                $("#username-tip").html("账号不能为空").css("color","red");
                uState=false;
            }else{
                var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
                if(!uPattern.test(username)){
                    console.log("用户名不符合规则");
                    $("#username-tip").text("用户名不符合命名规则").css("color","red");
                    uState=false;
                    return;
                }
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/register/checkName",
                    data:{
                        username:username,
                    },
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        console.log(data.result);
                        if(!data.result){
                            $("#username-tip").text("账号可以").css("color","green");
                            uState=true;
                        }else{
                            $("#username-tip").text("账号名相同").css("color","red");
                            uState=false;
                        }
                    }
                });
            }
        });
        $("input[name='password']").blur(function () {
            var pw = $(this).val();
            var uPattern = /^[a-zA-Z\d_]{8,}$/;
            if(pw == ''){
                $("#password-tip").text("密码不能为空").css("color","red");
                pState=false;
            }else if(!uPattern.test(pw)){
                $("#password-tip").text("密码不符合规则").css("color","red");
                pState=false;
            }else{
                $("#password-tip").text("密码可以").css("color","green");
                pState=true;
            }
        });
        $("input[name='phone']").blur(function () {
            var pw = $(this).val();
            var uPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            if(pw == ''){
                $("#phone-tip").text("手机号码不能为空").css("color","red");
                tState=false;
            }else if(!uPattern.test(pw)){
                $("#phone-tip").text("手机号码不符合规则").css("color","red");
                tState=false;
            }else{
                $("#phone-tip").text("手机号可以").css("color","green");
                tState=true;
            }
        });
        
        $("#submitBtn").click(function () {
            if(!uState){
                alert("请正确填写用户名");
                return;
            }
            if(!pState){
                alert("请正确填写密码");
                return;
            }
            if(!tState){
                alert("请正确填写电话");
                return;
            }
            $("#myregister").submit();
        });

  	});

  </script>
  
  <body>
        <div>
            <form id="myregister" action="${pageContext.request.contextPath}/user/welcome" method="post" enctype="application/x-www-form-urlencoded">
                账号：<input name="username"><span id="username-tip"></span><br>
                密码：<input type="password" name="password"> <span id="password-tip"></span><br>
                手机号码：<input name="phone" maxlength="11"> <span id="phone-tip"></span><br>
       年龄:<input name="age" ><br>
            <input type="button" value="提交" id="submitBtn">
            </form>

        </div>
  </body>


</html>
